@charset "utf-8";
@import "common";
html,
body {
    width: 100%;
    height: 100%;
}

.jiangpinWeb {
    width: 100%;
    height: 100%;
    font-size: 0;
    overflow: hidden;
    .head {
        position: relative;
        overflow: hidden;
        height: 20%;
        width: 100%;
        &>img {
            height: 100%;
            width: 100%;
        }
        &>div {
            position: absolute;
        }
        .zhuozi {
            left: 50%;
            width: 82.03%;
            bottom: r(6);
            img {
                width: 100%;
                animation: zhuozi 1s infinite;
            }
        }
        .lingdang {
            width: 11.72%;
            left: 66%;
            bottom: r(36);
            img {
                width: 100%;
                animation: lingdang 1s infinite;
            }
        }
        .huanlesong {
            left: 50%;
            top: 50%;
            width: 46.72%;
            img {
                width: 100%;
                animation: huanlesong 1s infinite;
            }
        }
        .left {
            top: r(20);
            left: 1.65%;
            height: r(40);
            img {
                height: 100%;
            }
        }
        .right {
            top: r(20);
            right: 1.72%;
            height: r(40);
            img {
                height: 100%;
            }
        }
        .isP {
            animation: right 3s infinite linear;
            @keyframes right {
                0% {
                    transform: rotate(0);
                }
                25% {
                    transform: rotate(90deg);
                }
                50% {
                    transform: rotate(180deg);
                }
                75% {
                    transform: rotate(270deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        }
    }
    .content {
        height: 80%;
        width: 100%;
        position: relative;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .zhongjiang,
    .jiangpin,
    .duihuan {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .zhongjiang {
        top: 34.78%;
        width: 52.19%;
        animation: zhongjiang 1s infinite;
        img {
            width: 100%;
        }
    }
    .jiangpin {
        top: 44.51%;
        height: 35.55%;
        animation: jiangpin 2s;
        img {
            height: 100%;
        }
    }
    .duihuan {
        bottom: 4.14%;
        height: 10.89%;
        animation: duihuan 1s;
        img {
            height: 100%;
        }
    }
}

@keyframes huanlesong {
    from {
        transform-origin: center;
        transform: translate(-50%, -50%) rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        transform-origin: center;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes lingdang {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.75);
    }
    50% {
        transform: scale(0.5);
    }
    75% {
        transform: scale(0.25);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes zhuozi {
    20% {
        transform: translateX(-50%) rotate3d(0, 0, 1, 15deg);
    }
    40% {
        transform: translateX(-50%) rotate3d(0, 0, 1, -10deg);
    }
    60% {
        transform: translateX(-50%) rotate3d(0, 0, 1, 5deg);
    }
    80% {
        transform: translateX(-50%) rotate3d(0, 0, 1, -5deg);
    }
    to {
        transform: translateX(-50%) rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes duihuan {
    from {
        transform: translateX(-50%) translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: translateX(-50%) skewX(20deg);
        opacity: 1;
    }
    80% {
        transform: translateX(-50%) skewX(-5deg);
        opacity: 1;
    }
    to {
        transform: translateX(-50%);
        opacity: 1;
    }
}

@keyframes jiangpin {
    from {
        transform-origin: center;
        transform: translateX(-50%) rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        transform-origin: center;
        transform: translateX(-50%);
        opacity: 1;
    }
}

@keyframes zhongjiang {
    from,
    11.1%,
    to {
        transform: translateX(-50%);
    }
    22.2% {
        transform: translateX(-50%) skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        transform: translateX(-50%) skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        transform: translateX(-50%) skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        transform: translateX(-50%) skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        transform: translateX(-50%) skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        transform: translateX(-50%)skewX(0.390625deg) skewY(0.390625deg);
    }
    88.8% {
        transform: translateX(-50%) skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}